<template>
  <div>
    <van-nav-bar
      fixed
      left-arrow
      :border="false"
      title="个人中心"
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top has-bottom">
      <div class="mg-24 list">
        <a v-for="(item,index) in linkList" :key="index" class="item flex-s-c" :href="item.link">
          <!-- <img class="img-icon flex-s-0" :src="item.icon" :alt="item.title"> -->
          <div class="flex-1">
            <p class="title">{{ item.title }}</p>
            <p class="text color-gray-light">{{ item.text }}</p>
          </div>
          <div class="right-arrow" />
        </a>
        <a class="item flex-s-c" :href="'tel:'+telData.tel">
          <!-- <img class="img-icon flex-s-0" :src="telData.icon" :alt="telData.title"> -->
          <div class="flex-1 flex-s-fs">
            <div class="mr-40">
              <p class="title">{{ telData.title }}</p>
              <p class="text color-gray-light">{{ telData.text }}</p>
            </div>
            <div class="flex-1">
              <p class="title">{{ telData.tel }}</p>
              <p class="text color-gray-light">{{ telData.workTime }}</p>
              <p class="color-gray-light pl-120">{{ telData.workTime1 }}</p>
            </div>
          </div>
        </a>
      </div>
      <a href="/m/user/logout">
        <div class="logout-btn color-primary">退出登录</div>
      </a>

      <!-- 底部栏 -->
      <div class="fixed-bottom  bottom-box bg-white ">
        <div class="bottom-box flex-s-c color-gray">
          <div v-for="(item,index) in bottomList" :key="index" :class="activeIndex==index?'color-primary':''" class="bottom-item" @click="goPage(item,index)">
            <svg-icon :icon-class="activeIndex==index?(item.icon+'-active'):item.icon" :class="activeIndex==index?'fs-36':'fs-42'" @goPage="goPage(item,index)" />
            <p class="tac fs-24">{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {

  },

  data() {
    return {
      linkList: [
        {
          icon: require('@/assets/hndy/hy-center-0.png'),
          title: '申请调级',
          text: '升级当前等级',
          link: '/m/user/ApplyMicroMerchantUpgrade2'

        },
        {
          icon: require('@/assets/hndy/hy-center-1.png'),
          title: '我的授权',
          text: '查看我的授权',
          link: '/m/user/MyAuthorizationCertificate'

        },
        {
          icon: require('@/assets/hndy/hy-center-2.png'),
          title: '修改密码',
          text: '修改新密码',
          link: '/m/user/editpwd'

        },
        {
          icon: require('@/assets/hndy/hy-center-3.png'),
          title: '我的地址',
          text: '查看我的地址',
          link: '/m/user/AddressList'

        },
        {
          icon: require('@/assets/hndy/hy-center-6.png'),
          title: '收款账户',
          text: '查看收款账户',
          link: '/m/user/BankList'
        },
        {
          icon: require('@/assets/hndy/hy-center-4.png'),
          title: '退出申请',
          text: '退出代理申请',
          link: '/m/user/ReturnCashDeposit'

        }

      ],
      telData: {
        icon: require('@/assets/hndy/hy-center-5.png'),
        title: '联系电话',
        text: '点击联系二昆虫客服',
        link: '',
        tel: '4001600775',
        workTime: '周一至周五上午08:30-12:00',
        workTime1: '下午13:30-17:50'
      },
      bottomList: [
        {
          title: '主界面',
          icon: 'hndy-home',
          link: '/home',
          linkType: 1
        },
        {
          title: '我要订货',
          icon: 'hndy-class',
          link: '/m',
          linkType: 0
        },
        {
          title: '采购单',
          icon: 'hndy-car',
          link: '/m/user/car',
          linkType: 0
        },
        {
          title: '个人中心',
          icon: 'hndy-center',
          link: '/user/center',
          linkType: 1
        }
      ],
      activeIndex: 3
    }
  },
  computed: {

  },
  created() {

  },
  activated() {},
  methods: {
    goPage(data, index) {
      // this.activeIndex = index
      switch (data.linkType) {
        case 0:
          window.location.href = data.link
          break
        case 1:
          this.$router.push({
            path: data.link
          })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.list{
  background: #fff;
  border-radius: 16px;
  .item{
    display: flex;
    padding: 32px 20px 32px 0;
    margin-left: 24px;
    &:not(:last-child){
      border-bottom: 1px solid #F0F0F0;
    }
    .img-icon{
      width: 48px;
      height: 48px;
      margin-right:24px ;
    }
    .title{
      font-size: 32px;
    }
    .text{
      margin-top: 16px;
    }
    .right-arrow{
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      flex-grow: 0;
      margin-left: 20px;
      // border-radius: 16px;
      // background: #F1F1F1;
      position: relative;
      &:after{
        content: '';
        width: 8px;
        height: 8px;
        border: 2px solid;
        border-color: #333 #333 transparent transparent;
        position: absolute;
        top: 10px;
        left: 8px;
        transform: rotate(45deg);
      }
    }
  }
}
.logout-btn{
  margin: 48px 40px;
  font-size: 32px;
  line-height: 88px;
  border-radius: 45px;
  border: 1px solid currentColor;
  text-align: center;
}
.bottom-box{
  height: 120px;
  background: #efefef;
  &:before{
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    background: #dadada;
    top: -1px;
  }
}
.bottom-item{
  flex: 1;
  text-align: center;
}
</style>
